<template>
  <view class="settlement">
    <mineNavbar :styleData="styleData" />

    <!-- <view class="tab">
      <view
        :class="tabStats === tab.name ? 'itemTab' : 'itemTab-default '"
        v-for="tab in tabList"
        @click="handClick(tab.name)">
        <text class="text"> {{ tab.name }} </text>
      </view>
    </view> -->

    <!-- <view style="height: 56rpx"></view> -->

    <scroll-view v-if="list && list.length > 0"  class="scroll" scroll-y @scrolltolower="scrollBottom">
      <view
        class="list"
        v-for="t in list"
        @click="toPath(t)"
        :key="t.settlementId">
        <view class="l-list">
          <view class="box">
            <view class="status">
              <span>
                {{ statusMap[t.settlementStatus] || "-" }}
              </span>
            </view>
            <view class="title ellipsis">
              {{ (t && t.positionName) || "-" }}
            </view>
          </view>

          <view class="time">
            {{ (t && t.startTime) || "-" }} 至 {{ (t && t.endTime) || "-" }}
          </view>
        </view>

        <view class="r-list">
          <view class="money">
            <view class="icon"> ￥</view>
            <view class="num">{{ (t && t.totalAmount) || "-" }}</view>
            <view class="img">
              <image
                src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/10/070e17ae97f04a9482b6fd51a7b6b5f2.png"
                mode="aspectFit|aspectFill|widthFix"
                lazy-load="false" />
            </view>
          </view>
        </view>
      </view>
      <uni-load-more
        :status="status"
        :content-text="contentText"></uni-load-more>
    </scroll-view>
    <noList v-else/>
    <!-- <view class="accomplish"> -加载完成，共{{ list.length }}条数据- </view> -->
  </view>
</template>

<script>
import { mapState } from "vuex";
import { getSettlementInfoList } from "@/api/subPage/mine";
export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "结算管理",
      },

      tabStats: "全部",
      tabList: [
        {
          name: "全部",
        },
        {
          name: "待确认",
        },
        {
          name: "已确认",
        },
        {
          name: "已取消",
        },
      ],

      list: [],
      statusMap: {
        0: "待确认",
        1: "已确认",
        2: "已取消",
        3: "已拒绝",
      },
      // 请求参数
      params: {
        pageSize: 7,
        pageNum: 1,
      },
      // 文字
      contentText: {
        contentdown: "没有更多数据",
      },

      // 加载状态
      status: "more",
      //
    };
  },

  computed: {
    ...mapState(["safeArea", "capsule"]),
  },
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {
    this.getList();
  },
  onShow() {
    this.getList()
  },
  onReady() {},
  methods: {
    handClick(v) {
      this.tabStats = v;
    },
    toPath(t) {
      // uni.navigateTo({
      //   url: `/subPage/enterprise/mine/details/settlementDetails?row=${t}`,
      // });

      const serializedObject = JSON.stringify(t);
      const encodedObject = encodeURIComponent(serializedObject);
    
      uni.navigateTo({
        url: `/subPage/enterprise/mine/details/settlementDetails?row=${encodedObject}`,
      });
    },

    async getList() {
      const { total, rows } = await getSettlementInfoList(this.params);
      this.total = total;
      this.list = rows;
    },

    async scrollBottom() {
      if (this.list.length >= this.total) return;
      if (this.loading) return;
      this.params.pageNum++;
      this.status = "loading";
      this.loading = true;
      const { rows } = await getSettlementInfoList(this.params);
      this.status = "more";
      this.loading = false;
      this.list = [...this.list, ...rows];
    },
  },
};
</script>
<style lang="scss" scoped>
.settlement {
  background-color: #f9f9f9;
  height: 90vh;

  .tab {
    z-index: 999;
    position: fixed;
    top: var(--safeArea-top) + "px";
    height: 56rpx;
    display: flex;
    justify-content: start;
    padding: 24rpx 0 32rpx 32rpx;

    background-color: #f9f9f9;
    width: 100%;
    margin-bottom: 62rpx;
    .itemTab {
      width: 140rpx;
      height: 56rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      margin-right: 16rpx;

      display: flex;
      justify-content: center;
      align-items: center;
      .text {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        letter-spacing: 0;
      }
    }

    .itemTab-default {
      width: 140rpx;
      height: 56rpx;
      background: #d8d8d85c;
      border-radius: 44rpx;
      margin-right: 16rpx;

      display: flex;
      justify-content: center;
      align-items: center;
      .text {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
        opacity: 0.88;
      }
    }
  }

  .scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24rpx;
    padding-bottom: 10rpx;
    height: 90vh;
    .list {
      height: 145rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 30rpx 32rpx 24rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 16rpx;

      .l-list {
        .box {
          display: flex;

          .status {
            width: 80rpx;
            height: 36rpx;

            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff5e9;
            border-radius: 6rpx;
            margin-bottom: 10rpx;
            margin-right: 10rpx;

            span {
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 20rpx;
              color: #ed8e16;
            }
          }

          .title {
            font-weight: 500;
            font-size: 30rpx;
            color: #000000e0;
            font-weight: 700;
          }
        }

        .time {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 24rpx;
          color: #000000;
          opacity: 0.45;
        }
      }

      .r-list {
        .icon {
          color: #ff9e24;
          font-size: 28rpx;
          font-face: PingFangSC;
          font-weight: 500;
          text-align: center;
        }
        .money {
          display: flex;
          align-items: center;
          color: #ff9e24;
          font-size: 36rpx;
          font-face: DINAlternate;
          font-weight: 700;
          line-height: 0;
          text-align: center;
        }

        .img {
          width: 20rpx;
          height: 20rpx;
          margin-left: 15rpx;
          color: #000000;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  // .accomplish {
  //   width: 276rpx;
  //   height: 33rpx;
  //   font-family: PingFangSC-Medium;
  //   font-weight: 500;
  //   font-size: 24rpx;
  //   color: #00000033;
  //   letter-spacing: 0;
  //   text-align: center;
  //   margin: 20rpx auto;
  // }
}
</style>
